<template>
  <div class="app-container">
    <!-- 编辑分类 -->
    <el-dialog
      :closeOnClickModal="false"
      :title="title" 
      :show-close="true"
      :visible.sync="dialogFormVisible" width="100%">
      <el-form ref="form" :model="form" label-width="100px" label-position="right">
        <!-- <el-form-item label="上级分类">
          <el-select placeholder="请选择上级分类名称" v-model="form.parent_tid">
            <el-option v-for="(item, index) in form.options" :key="index" :label="form.options.label" :value="form.options.tid"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="分类名称">
          <el-input @input="inputName" v-model="form.name"></el-input>
        </el-form-item>
        <!-- <el-form-item label="图片来源">
          <el-select placeholder="请选择图片来源" value="">
            <el-option label="网上" value="1"></el-option>
            <el-option label="本地上传" value="2"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="sort">
          <el-input v-model="form.sort"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">关闭</el-radio>
            <el-radio :label="1">开启</el-radio>
          </el-radio-group>          
        </el-form-item>
      </el-form>
      <el-row justify="end" type="flex">
        <el-button type="text" @click="closeDialog">取消</el-button>
        <template v-if="operation === 'createCategory'">
          <el-button type="primary" @click="createCategory">创建分类</el-button>
        </template>
        <template v-if="operation === 'updateCategory'">
          <el-button type="primary" @click="updateCategory">修改分类</el-button>
        </template>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { _createProductCategory, _updateProductCategory } from '@/api/product'
export default {
  mounted() {
    console.log('form', this.form)
  },
  methods: {
    inputName(value) {
      this.form.name = value
    },
    handleForm() {
      delete this.form.options
      delete this.form.cover_image_url
      delete this.form.views_count
      delete this.form.cover_image_from
      delete this.form.parent_tid
    },
    createCategory() {
      this.handleForm()
      this.form.shop_tid = 1
      _createProductCategory(this.form).then(res => {
        this.$message({
          type: 'success',
          message: '创建成功'
        })
        this.$emit('cancelDialogFormVisible')
      }).catch(err => {
        console.log(err)
      })
    },
    updateCategory() {
      this.handleForm()
      console.log('更新参数呀', this.form)
      this.form.shop_tid = 1
      _updateProductCategory(this.form).then(res => {
        this.$message({
          type: 'success',
          message: '更新成功'
        })
        this.$emit('cancelDialogFormVisible')
      }).catch(err => {
        console.log(err)
      })
    },
    closeDialog() {
      this.$confirm('确定要取消编辑吗？（编辑内容将会丢失）', '提示', {
        confirmButtonText: '确定取消编辑',
        cancleButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'info',
          message: '已取消编辑'
        })
        this.$emit('cancelDialogFormVisible')
      }).catch(() => {

      })
    }
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      require: true
    },
    form: {
      type: Object,
      require: true
    },
    title: {
      type: String,
      require: true
    },
    operation: {
      type: String,
      require: true
    }
  },
  data() {
    return {
    }
  }
}
</script>

<style scoped>

</style>